<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>水波纹效果</title>
    <style>
        @-webkit-keyframes wateranimate {
            0% {
                -webkit-transform: scale(0);
                opacity: 0.5;
            }
            100% {
                -webkit-transform: scale(2);
                opacity: 0;
            }
        }
        @keyframes wateranimate {
            0% {
                -webkit-transform: scale(0);
                transform: scale(1);
                opacity: 0.5;
            }
            100% {
                -webkit-transform: scale(2);
                transform: scale(2);
                opacity: 0;
            }
        }
        .container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto 10px auto;
            background-color: #fbfbfb;
        }
        .water1 {
            -webkit-animation: wateranimate 12s 9s ease-out infinite;
            animation: wateranimate 12s 9s ease-out infinite;
        }
        .water2 {
            -webkit-animation: wateranimate 12s 6s ease-out infinite;
            animation: wateranimate 12s 6s ease-out infinite;
        }
        .water3 {
            -webkit-animation: wateranimate 12s 3s ease-out infinite;
            animation: wateranimate 12s 3s ease-out infinite;
        }
        .water4 {
            -webkit-animation: wateranimate 12s 0s ease-out infinite;
            animation: wateranimate 12s 0s ease-out infinite;
        }
        .water1, .water2, .water3, .water4 {
            padding: 20%;
            position: absolute;
            left: 30%;
            top: 30%;
            border: 1px solid pink;
            box-shadow: 0 0 120px 30px rgba(235, 31, 137, 1) inset;
            border-radius: 100%;
            z-index: 1;
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="water1"></div>
    <div class="water2"></div>
    <div class="water3"></div>
    <div class="water4"></div>
</div>
</body>
</html>